<template>
  <el-row>
    <el-col :span="7">
      <div class="left" >
        <div  id="leftTop">
        </div>
        <div  id="leftBottom">
        </div>
      </div>
    </el-col>
    <el-col :span="10">
      <div id="main">
      </div>
    </el-col>
    <el-col :span="7">
      <div class="right">
        <div  id="rightTop">
        </div>
        <div  id="rightBottom">
        </div>
      </div></el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts/core'
import { ToolboxComponent, LegendComponent, GridComponent, TitleComponent, TooltipComponent } from 'echarts/components'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  UniversalTransition,
  GridComponent,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent
])

export default {
  name: 'data',
  data () {
    return {
    }
  },
  methods: {
    async draw () {
      const PieDataList = []
      const { data: res } = await this.$http.get('dataVisual/BuildInviteNum')
      for (const resKey in res.data) {
        const PieData = { value: 0, name: '' }
        PieData.value = res.data[resKey].inviteNum
        PieData.name = res.data[resKey].build
        PieDataList.push(PieData)
      }
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '发布地点分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '50'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: {
              show: true,
              readOnly: false
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '地点发帖数量',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '60%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: PieDataList
          }
        ]
      }

      option && myChart.setOption(option)
    },
    async drawLeftTop () {
      const time = []
      const dataNum = []
      const { data: res } = await this.$http.get('dataVisual/SevenDayTopicNum')
      res.data.reverse()
      for (const resKey in res.data) {
        time.push(res.data[resKey].day)
        dataNum.push(res.data[resKey].inviteNum)
      }
      var chartDom = document.getElementById('leftTop')
      var myChart = echarts.init(chartDom)
      myChart.resize({
        height: 400
      })
      var option
      option = {
        title: {
          text: '近七天话题发布数量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataNum,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    async drawRightTop () {
      const time = []
      const dataNum = []
      const { data: res } = await this.$http.get('dataVisual/sevenDayInviteNum')
      res.data.reverse()
      for (const resKey in res.data) {
        time.push(res.data[resKey].day)
        dataNum.push(res.data[resKey].inviteNum)
      }
      var chartDom = document.getElementById('rightTop')
      var myChart = echarts.init(chartDom)
      myChart.resize({
        height: 400
      })
      var option

      option = {
        title: {
          text: '近七天用户发帖数量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataNum,
            type: 'line',
            areaStyle: {}
          }
        ]
      }

      option && myChart.setOption(option)
    },
    drawRightBottom () {
      var chartDom = document.getElementById('rightBottom')
      var myChart = echarts.init(chartDom)
      myChart.resize({
        height: 400
      })
      var option

      option = {
        // title: {
        //   text: 'World Population',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2012',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      }

      option && myChart.setOption(option)
    },
    async drawLeftBottom () {
      const time = []
      const dataNum = []
      const { data: res } = await this.$http.get('dataVisual/SevenDayUserNum')
      res.data.reverse()
      for (const resKey in res.data) {
        time.push(res.data[resKey].day)
        dataNum.push(res.data[resKey].inviteNum)
      }

      const chartDom = document.getElementById('leftBottom')
      const myChart = echarts.init(chartDom)
      myChart.resize({
        height: 400
      })
      var option

      option = {
        title: {
          text: '近七天用户注册数量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataNum,
            type: 'line'
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 用于改变面包屑导航栏
    changeBread () {
      document.getElementById('first').innerHTML = '数据查看'
      document.getElementById('second').innerHTML = '数据分析'
      document.getElementById('separate_1').innerHTML = '/'
      document.getElementById('separate_2').innerHTML = '/'
    }
  },
  mounted () {
    this.draw()
    this.drawLeftTop()
    this.drawRightTop()
    this.drawLeftBottom()
    this.drawRightBottom()
    this.changeBread()
  }
}
</script>

<style scoped>
#main{
  height: 100vh;
}
.left{
  height: 100vh;
  /*background-color: #409CFF;*/
}
.right{
  height: 100vh;
  /*background-color: #f56c6c;*/
}
</style>
